<template>
	<div class="papaparse">
		<h2>导入</h2>
		<input type="file" ref="refFile" @change="inCsv" placeholder="导入csv" />
		<ul>
			<li v-for="(item, index) in data" :key="index">
				<span v-for="title in item" :key="title">{{ title }}</span>
			</li>
		</ul>
		<h2>导出</h2>
		<el-button type="primary" round @click="outCsv">导出</el-button>
	</div>
</template>

<script>
import { importCsv, exportCsv } from '@/utils/handleCsv.js';

export default {
	name: 'papaparse',
	data() {
		return {
			data: [],
		};
	},
	methods: {
		async inCsv() {
			let files = this.$refs.refFile.files[0];
			this.data = await importCsv(files);
		},
		outCsv() {
			exportCsv(this.data, '导出.csv');
		},
	},
};
</script>
